<template>
	<el-main>
		<el-tabs tab-position="top">
			<el-tab-pane label="可视模式">
				<UiEditor />
			</el-tab-pane>

			<el-tab-pane label="源码模式">
				<scJsonEditor
					:data="sharedData"
					:hideToolbar="[{className:'jse-run'}]"
				/>
			</el-tab-pane>
		</el-tabs>
	</el-main>
</template>

<script setup>
import { ref, reactive, provide } from 'vue'
//import JsonEditor from './json.vue'
import { scJsonEditor } from '/packages/index.js'

import UiEditor from './input-ui.vue'


// 定义响应式共享数据
const sharedData = reactive({
	formData: [
		{
			id: 1,
			name: 'username',
			type: '1',
			checked: true,
			val: '用户登录名，长度6-20位'
		},
		{
			id: 2,
			name: 'password',
			type: '1',
			checked: true,
			val: '登录密码，需要加密传输'
		},
		{
			id: 3,
			name: 'age',
			type: '0',
			checked: false,
			val: '用户年龄，18岁以上'
		},
		{
			id: 4,
			name: 'gender',
			type: '0',
			checked: false,
			val: '性别：1-男，2-女'
		},
		{
			id: 5,
			name: 'is_vip',
			type: '1',
			checked: false,
			val: '是否是VIP用户'
		}
		,
		{
			id: 6,
			name: 'data',
			type: '1',
			checked: false,
			val: '数据',
			children: [
				{
					id: 7,
				name: 'is_vip',
				type: '1',
				checked: false,
				val: '是否是VIP用户'
			}
			]
		}
	]
})

// 提供共享数据和方法
provide('sharedData', sharedData)
</script>
